<template>
    <div class="container">
        <el-row>
            <el-col :span="18">
				<h1>添加项目信息</h1>
			</el-col>
			<el-col :span="6" class='btn-panel'>
				<el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
			</el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content">项目名称：</div>
            </el-col>
            <el-col :span="6">
                <el-input v-model="Item.project_name" placeholder="请输入项目名称"></el-input>
            </el-col>
            <el-col :span="6">
                <div class="grid-content">项目简介：</div>
            </el-col>
            <el-col :span="6">
                <el-input v-model="Item.project_tip" placeholder="请输入项目简介" ></el-input>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content">项目详细内容：</div>
            </el-col>
            <el-col :span="6">
                <el-input v-model="Item.project_content" placeholder="请输入项目详细内容"></el-input>
            </el-col>
            <el-col :span="6">
                <div class="grid-content">申报单位ID：</div>
            </el-col>
            <el-col :span="6">
                <el-input v-model="Item.company_id" placeholder="请输入申报单位ID" ></el-input>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content">项目申报者ID：</div>
            </el-col>
            <el-col :span="6">
                <el-input v-model="Item.company_user_id" placeholder="请输入项目申报者ID"></el-input>
            </el-col>
            <el-col :span="6">
                <div class="grid-content">参选理由：</div>
            </el-col>
            <el-col :span="6">
                <el-input v-model="Item.project_reason" placeholder="请输入参选理由"></el-input>
            </el-col>            
        </el-row>   
    </div>
</template>

<script>
    export default {
        //vue定义属性和方法
        data() {
		    return {
                Item: {
                    project_name: "",
			        project_tip: "",
                    project_content:"",
			        company_id: "",
                    company_user_id: "",
                    project_reason: "",
                    project_time:""
                }
			    
		    };
	    },
        methods:{
            async submit() {			
                await this.addinfoHandler();			    
		    },
            change(value, render) {
			// render 为 markdown 解析后的结果
			this.html = render;
		    },
            change(e){
                this.$forceUpdate();
            },
            async addinfoHandler(){
                //判断输入不能为空
                if(this.Item.project_name===""
                ||this.Item.project_tip===""||
                this.Item.project_content===""||
                this.Item.company_id===""||
                this.Item.company_user_id===""||
                this.Item.project_reason===""){
                    alert("输入项不能为空！");
                    return;
                }
                else{
                        var data = await this.$http.post('/addprojectinfo',JSON.stringify(this.Item));
                        if(data.state=200){
                            //提交成功
                            this.$message.success(data.message);
                        }else{
                            this.$message.error(data.message);
                            return;
                        }
                        
                    }
                }
            }
    }
</script>

<style scoped>
.container {
	position: relative;
	padding: 30px;
	background: #fff;
	border-radius: 5px;
	text-align: left;
}

.top-panel {
	height: 50px;
	line-height: 50px;
	text-align: center;
}

.row-list {
	margin-bottom: 20px;
}

.btn-panel{
    text-align: right;
}

.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
}

.grid-content {
    border-radius: 4px;
    line-height: 40px;
}
</style>